<template>
  <div class="nesAddress">
    <div class="header">
      <van-nav-bar title="修改地址" fixed  right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <div class="nesAddress_con">
      <ul>
        <li>
          <p>收货人</p>
          <input type="text" :placeholder="name" v-model.trim='formData.aname'/>
        </li>
        <li>
          <p>联系电话</p>
          <input type="text" :placeholder="phone" oninput="if(value.length>11) value=value.slice(0,11)" maxlength="11"
                 v-model.trim='formData.aphone' @blur="checkPhoneNumber()"/>
        </li>
        <li>
          <!--<mt-cell title=" 省 市 区:" :value="areaString" is-link @click.native="handlerArea"></mt-cell>-->
          <!--<mt-popup v-model="areaVisible" class="area-class" position="bottom">-->
          <!--<mt-picker :slots="slots" @change="onValuesChange"></mt-picker>-->
          <!--</mt-popup>-->
          <div class="nesAddress_con_title">省 市 区</div>
          <select v-model="formData.province.model"
                  @change="changeAddress('province')" class="nesAddress_select">
            <option value='0'>请选择</option>
            <option :value='item.id' v-for="item in formData.province.data">{{item.name}}</option>
          </select>
          <select v-model="formData.city.model" @change="changeAddress('city')" class="nesAddress_select">
            <option :value='item.id' v-for="item in formData.city.data">{{item.name}}</option>
          </select>
          <select v-model="formData.county.model" @change="changeAddress('county')" class="nesAddress_select">
            <option :value='item.id' v-for="item in formData.county.data">{{item.name}}</option>
          </select>
        </li>
        <li>
          <p>收货地址</p>
          <input type="text" :placeholder="detailed"  v-model.trim='formData.address'/>
        </li>
        <li>
          <p>默认地址</p>
          <div class="mycheck">
            <input type="checkbox" value="" id="checkbox1" name="" v-model="setDefault"/>
            <label for="checkbox1"></label>
          </div>
        </li>
      </ul>
    </div>
    <div class="nesAddress_foot" @click='saveAddress()'>
      <button class="nesAddress_foot_button1"  :disabled="!formData.county.model" :class="formData.county.model ? 'submitBtn' : 'yf_submitBtn'">确认</button>
    </div>
  </div>
</template>

<script>
  import cityData from '../../common/cityData.js'
    export default {
        name: "EditAddress",
      data() {
        return {
          setDefault:false,//记录是否设为默认地址
          default_address_flag: 0,    //默认地址标签
          name:this.$route.query.name,
          phone:this.$route.query.phone,
          province:this.$route.query.province,
          city:this.$route.query.city,
          county:this.$route.query.county,
          detailed:this.$route.query.detailed,
          id:this.$route.query.id,
          formData: {
            aname: '',
            address: '',
            aphone: '',
            county: {
              data: [],
              model: 0,
              name: ''
            },
            city: {
              data: [],
              model: 0,
              name: ''
            },
            province: {
              data: [],
              model: 0,
              name: ''
            }
          },
          choosedAddressId: null,//当前被选中的地址的ID

        }
      },
      created:function () {
        //隐藏公用底部
        this.$emit('public_footer', false);
        setTitle('修改地址')
      },
      mounted: function () {

        this.getCitysMethod()
      },
      methods:{
        //返回
        onClickLeft() {
          this.$router.go(-1);
        },
        //获得省份列表
        getCitysMethod() {
          /*从数据中循环出省份*/
          let P = []
          cityData.forEach((item, i) => {
            if (item.id % 10000 == 0 && item.id != 100000) {
              P.push({
                id: item.id,
                name: item.name
              })
            }
          })
          this.formData.province.data = P
        },
        //循环出城市列表或地区列表
        changeAddress(type, call) {
          if (type == 'province') {
            let C = []
            this.formData.city.model = 0
            this.formData.county.model = 0

            /*从数据中循环出当前选择省份下面的市区*/
            cityData.forEach((item, i) => {
              if (item.parentId == this.formData.province.model) {
                C.push({
                  id: item.id,
                  name: item.name
                })
              }
              if (item.id == this.formData.province.model) {
                this.formData.province.name = item.name
              }
            })
            this.formData.city.data = C
            call && call()
          } else if (type == 'city') {
            let Cu = []
            this.formData.county.model = 0

            /*从数据中循环出当前选择市下面的区县*/
            cityData.forEach((item, i) => {
              if (item.parentId == this.formData.city.model) {
                Cu.push({
                  id: item.id,
                  name: item.name
                })
              }
              if (item.id == this.formData.city.model) {
                this.formData.city.name = item.name
              }
            })
            this.formData.county.data = Cu
            call && call()
          } else {
            cityData.forEach((item, i) => {
              if (item.id == this.formData.county.model) {
                this.formData.county.name = item.name
              }
            })
          }
        },

        //  将地址传给后台
        async saveAddress(){
          let this_ = this;
          let isdefaultads = this.setDefault==true ? 1:0
          var userList=[]
          var userList=JSON.parse(localStorage.getItem('userInfo'))
          this.userList=userList
          let params = {
            user_id:userList.userId,
            name:this_.formData.aname||this.name,
            phone:this_.formData.aphone||this.phone,
            detailed:this_.formData.address||this.detailed,
            province:this_.formData.province.name,
            city:this_.formData.city.name,
            county:this_.formData.county.name,
            is_default:isdefaultads,
            id:this.id,
          };
          const res = await this.$axios.post(this.$api.UserGoodsAddressData, params);
          if (res.success) {
            this.$toast(res.msg);
            this.$router.push({path:'/Address'})
          } else {
            this.$toast(res.msg);
          }
        },
        //表单初始化
        checkPhoneNumber: function () {
          let reg = /^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/;
          if (reg.test(this.formData.aphone) == false) {
            this.formData.aphone = '';
            this.$message({
              type : 'error',
              message : '请输入正确的手机号'
            });
          }
        },
      },

    }
</script>

<style scoped>
  @import '../../assets/css/index.css';
  .area-class {width: 100%;height: 28%;}
  .mycheck {width: 0.4rem;position: relative;right: 0.2rem;float: right;top:0.15rem;display: inline-block;}
  .mycheck input[type=checkbox] {visibility: hidden;}
  .mycheck label {cursor: pointer;position: absolute;width: 0.2rem;height: 0.2rem;top: 0;left: 0;border: 1px solid grey;border-radius: 1.8rem;
    -moz-border-radius: 1.8rem;      /* Gecko browsers */-webkit-border-radius: 1.8rem;   /* Webkit browsers */ /* W3C syntax */}
  .mycheck label:after {opacity: 0;content: '';position: absolute;width: 0.09rem;height: 0.05rem;background: transparent;top: 0.04rem;left: 0.04rem;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);-ms-transform: rotate(-45deg);transform: rotate(-45deg);}
  .mycheck input[type=checkbox]:checked + label {background: #01bf47;border: 0;}
  .mycheck input[type=checkbox]:checked + label:after {opacity: 1;}
</style>
